<template>
  <page
    ref="scroll"
    :better-scroll="true"
    :header-immerse="true"
    @scroll="scroll">
    <goods-header
      slot="top"
      :scroll-y="scrollY"
      @clickTab="clickTab"></goods-header>
    <goods-swipper :swipperList="swipperList"></goods-swipper>
    <goods-info></goods-info>
    <goods-number
      @change="goodsNumberChange"></goods-number>
    <goods-spec></goods-spec>
    <goods-instructions></goods-instructions>
    <goods-evaluate></goods-evaluate>
    <goods-shop></goods-shop>
    <goods-details :detailsSet="detailsSet"></goods-details>
    <goods-action slot="bottom"></goods-action>
  </page>
</template>

<script type="text/ecmascript-6">
  import goodsHeader from './goods-header'
  import goodsSwipper from './goods-swipper'
  import goodsInfo from './goods-info'
  import goodsNumber from './goods-number'
  import goodsSpec from './goods-spec'
  import goodsInstructions from './goods-instructions'
  import goodsEvaluate from './goods-evaluate'
  import goodsShop from './goods-shop'
  import goodsDetails from './goods-details'
  import goodsAction from './goods-action'

  export default {
    data() {
      return {
        swipperList: [
          {
            image: require('@/static/images/product/p3.jpg')
          },
          {
            image: require('@/static/images/product/p3.jpg')
          },
          {
            image: require('@/static/images/product/p3.jpg')
          }
        ],
        detailsSet: {
          summary: [
            {
              img: require('@/static/images/product/p3.jpg')
            },
            {
              img: require('@/static/images/product/p3.jpg')
            },
            {
              img: require('@/static/images/product/p3.jpg')
            },
            {
              img: require('@/static/images/product/p3.jpg')
            },
            {
              img: require('@/static/images/product/p3.jpg')
            },
            {
              img: require('@/static/images/product/p3.jpg')
            },
            {
              img: require('@/static/images/product/p3.jpg')
            }
          ]
        },
        scrollY: 0
      }
    },
    components: {
      goodsHeader,
      goodsSwipper,
      goodsInfo,
      goodsNumber,
      goodsSpec,
      goodsInstructions,
      goodsEvaluate,
      goodsShop,
      goodsDetails,
      goodsAction
    },
    methods: {
      scroll(e) {
        this.scrollY = e.y
      },
      clickTab(n) {
        if (n === 0) {
          this.$refs.scroll.scrollTo([0, 0, 800])
        }
        if (n === 1) {
          this.$refs.scroll.scrollTo('#goods-details')
        }
        if (n === 2) {
          this.$go('/evaluate')
        }
      },
      goodsNumberChange(o) {
        // @TODO
      }
    }
  }
</script>
